<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <script th:inline="none">
        function check(e) {
            const managerName = document.getElementById("managerName").value;
            const password = document.getElementById("password").value;
            const email = document.getElementById("email").value;
            if (managerName == null || managerName === '' || managerName === undefined) {
                alert("Please enter your managerName!");
                return false;
            } else if (password == null || password === '' || password === undefined) {
                alert("Please enter your password!");
                return false;
            }else if(email == null  || email === '' || email === undefined){
                alert("Please enter your email!")
            }
        }
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(/static/images/index_background.png) no-repeat 0px 0px;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        #registerDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }

        #name_trip {
            margin-left: 50px;
            color: red;
        }

        #email_trip {
            margin-left: 50px;
            color: red;
        }

        p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
        }

        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }

        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
    </style>


</head>
<body>

<div id="registerDiv">

    <form action="/account/register"  method="post" id="form" onsubmit="return check(this)">
        <h1 style="text-align: center;color: aliceblue;">REGISTER NOW</h1>
        <p>Manager Name:<input type="text" id="managerName" name="managername"><label id="name_trip"></label></p>
        <p>Password:<input type="password" id="password" name="password"><label id="password_trip"></label></p>
        <p>Email:<input type="text" id="email" name="email"><label id="email_trip"></label></p>
                <div style="color: red" th:text="${registerFail}">用户名不可用</div>
        <div style="text-align: center;margin-top: 30px;">
            <input id="register" type="submit" class="button" name="submit" value="register">
            <input type="reset" class="button" value="reset">
        </div>

    </form>
    <!--    Need a user name and password?-->
    <!--    <a href="/account/toRegister">Register Now!</a>-->
</div>

</body>
</html>